<template>
    <el-card class="box-card">
        <el-collapse v-model="activeName" accordion>
            <el-collapse-item name="1">
                <template slot="title">
                    <div slot="header" class="clearfix title-con">
                        <el-row>
                            <el-col :span="12">
                                <span class="el-icon-search icon-left"></span>
                                <span>筛选搜索<span>(点击折叠)</span></span>
                            </el-col>
                            <el-col :span="12" class="right-btn">
                                <el-button type="primary" size="mini" @click="searchFun">查询</el-button>
                                <el-button size="mini">重置</el-button>
                            </el-col>
                        </el-row>
                    </div>
                </template>
                <div class="text item">
                    <el-form ref="form" :model="listQuery" label-width="80px">
                        <el-row :gutter="10">
                            <el-col :span="8">
                                <el-form-item label="输入搜索">
                                    <el-input v-model="listQuery.name" placeholder="商品名称"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="商品货号">
                                    <el-input v-model="listQuery.product_sn" placeholder="商品货号"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="商品分类">
                                    <el-select v-model="listQuery.product_category_id" placeholder="配件">
                                        <el-option
                                            v-for="item in porductAttrOptions"
                                            :label="item.name"
                                            :value="item.id"
                                            :key="item.id"
                                        ></el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>
                        </el-row>

                        <el-row :gutter="10">
                            <el-col :span="8">
                                <el-form-item label="商品品牌">
                                    <el-select v-model="listQuery.brand_id" placeholder="华为">
                                        <el-option
                                            v-for="item in brandOptions"
                                            :label="item.name"
                                            :value="item.id"
                                            :key="item.id"
                                        ></el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>

                            <el-col :span="8">
                                <el-form-item label="上架状态">
                                    <el-select v-model="listQuery.publish_status" placeholder="未上架">
                                        <el-option
                                            v-for="item in ExamineStatusOptions"
                                            :label="item.label"
                                            :value="item.value"
                                            :key="item.value"
                                        ></el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>

                            <el-col :span="8">
                                <el-form-item label="审核状态">
                                    <el-select v-model="listQuery.examine_status" placeholder="未审核">
                                        <el-option
                                            v-for="item in ExamineStatusOptions"
                                            :label="item.label"
                                            :value="item.value"
                                            :key="item.value"
                                        ></el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>
                        </el-row>
                    </el-form>
                </div>
            </el-collapse-item>
        </el-collapse>
    </el-card>
</template>

<script>
import { getBrandList, getProductAttrList } from "@/network/product/";

export default {
    data() {
        return {
            listQuery: {
                pageSize: 10, //一页10条数据
                pageNum: 1, //当前页
                name: "", //商品名称
                product_sn: null, // 货号
                publish_status: null, // 上架状态
                examine_status: null, // 审核状态
                brand_id: null, //品牌id
                product_category_id: null, // 商品分类id
            },
            publishStatusOptions: [
                { value: 1, label: "上架" },
                { value: 0, label: "下架" },
            ],
            ExamineStatusOptions: [
                { value: 1, label: "已审核" },
                { value: 0, label: "未审核" },
            ],
            porductAttrOptions: [], // 商品分类列表
            brandOptions: [], //商品品牌列表
            examine_status: 1, // 审核状态
            activeName: "1",
        };
    },
    methods: {
        searchFun() {
            //重新获取数据
            // this.getProductData();
        },
        // 获取商品品牌数据
        async BrandList() {
            const { data } = await getBrandList();
            this.brandOptions = data;
        },
        // 获取商品分类数据
        async AttrList() {
            const { data } = await getProductAttrList();
            this.porductAttrOptions = data;
        },
    },
    mounted() {
        //调用 获取 列表的函数
        // this.getProductData();
        //调用 获取 品牌列表
        this.BrandList();
        // 获取商品分类数据
        this.AttrList();
    },
};
</script>

<style lang="scss" scoped>
.text {
    font-size: 14px;
}

.clearfix:before,
.clearfix:after {
    display: table;
    content: "";
}
.clearfix:after {
    clear: both;
}

.box-card {
    margin-bottom: 20px;
    .el-row {
        line-height: 25px;
    }
}

.title-con {
    width: 100%;
    .icon-left {
        margin-right: 5px;
    }
    .right-btn {
        display: flex;
        justify-content: flex-end;
        padding-right: 10px;
    }
}

.el-select {
    width: 100%;
}
</style>
